<template>
  <div>
    <div style="margin-top: 20px">
      今日新增 <a>{{todayCount}}</a> 条
      <a-divider type="vertical" />
      剩余 <a>{{totalCount}}</a> 条
      <a-divider type="vertical" />
      <a-button type="default" style="margin-right:5px" @click="$refs.table.refresh(true)">刷新</a-button>
      <a-button :loading="loading" :disabled="totalCount == 0" type="primary" style="margin-right:5px" @click="allReceived">全部领取</a-button>
      <a-button :disabled="selectedRowKeys.length == 0" type="danger" @click="batchReceived">批量领取</a-button>
    </div>
    <a-divider />
    <div class="table-operator">
      <s-table
        bordered
        ref="table"
        size="middle"
        :row-key="(record) => record.cb_id"
        :columns="businessColumns"
        :data="businessData"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      >
        <template slot="xu" slot-scope="text,record,index">
          {{index + 1}}
        </template>
        <template slot="adviser" slot-scope="text, record">
          <a-tag>{{text}}</a-tag><br>
          <a-tag>{{record.group_type}}组</a-tag><br>
          <a-tag>{{record.leader}}</a-tag>
        </template>
        <template slot="contract_no" slot-scope="text,record">
          <a-popover trigger="hover">
            <template slot="content">
              <p>合同编号：{{text}}<a-divider type="vertical" /><a-icon class="copy" :data-clipboard-text="text" type="copy" @click="copy" /></p>
              <p>业务编号：{{record.business_no}}<a-divider type="vertical" /><a-icon class="copy" :data-clipboard-text="record.business_no" type="copy" @click="copy" /></p>
            </template>
            {{text}}<br>
            {{record.business_no}}
          </a-popover>
        </template>
        <template slot="official_fee" slot-scope="text, record">
          <a-tag color="red">价格：{{record.price}}</a-tag><br>
          <a-tag color="red">官费：{{text}}</a-tag><br>
          <a-tag color="red">代理费：{{record.agency_fee}}</a-tag>
        </template>
        <template slot="action" slot-scope="text, record">
          <a-button style="margin-right:5px" size="small" type="primary" @click="onReceived(record.cb_id)">领取</a-button>
        </template>
      </s-table>
    </div>
  </div>
</template>

<script>
  import Clipboard from 'clipboard'
  import { STable } from '@/components'
  import businessColumns from '@/columns/tm.process'
  import { getFcgTrademarkData, getReceive } from '@/api/tm.process'

  export default {
    components: {
      STable
    },
    name: 'FcgReceive',
    data () {
      return {
        businessColumns: businessColumns.receive,
        businessData: parameters => {
          return getFcgTrademarkData(Object.assign(parameters, this.queryParam)).then(res => {
            this.todayCount = res.result.today_unclaimed_count
            this.totalCount = res.result.total_unclaimed_count
            return res.result
          })
        },
        todayCount: '0',
        totalCount: '0',
        queryParam: {},
        selectedRowKeys: [],
        editVisible: false,
        processVisible: false,
        processOpts: {},
        processForm: {},
        loading: false
      }
    },
    methods: {
      onSelectChange (selectedRowKeys) {
        this.selectedRowKeys = selectedRowKeys
      },
      onReceived (id) {
        const app = this
        const data = {}
        const arr = []
        arr[0] = id
        data['cb_ids'] = arr
        app.$confirm({
          title: '是否确认领取此条业务',
          onOk: () => {
            getReceive(data).then(res => {
              if (res.status === 0) {
                app.$refs.table.refresh()
              } else {
                app.$warning({
                  title: res.msg
                })
                return false
              }
            })
          }
        })
      },
      batchReceived () {
        const app = this
        const data = {}
        data['cb_ids'] = app.selectedRowKeys
        app.$confirm({
          title: '是否确认领取所选择的业务',
          onOk: () => {
            getReceive(data).then(res => {
              if (res.status === 0) {
                app.$refs.table.refresh(true)
              } else {
                app.$warning({
                  title: res.msg
                })
                return false
              }
            })
          }
        })
      },
      allReceived () {
        const app = this
        const data = {}
        app.$confirm({
          title: '是否确认领取全部业务',
          onOk: () => {
            app.loading = true
            getReceive(data).then(res => {
              if (res.status === 0) {
                app.$refs.table.refresh(true)
                app.loading = false
              } else {
                app.$warning({
                  title: res.msg
                })
                return false
              }
            })
          }
        })
      },
      copy () {
        const clipboard = new Clipboard('.copy')
        clipboard.on('success', e => {
          this.$message.success('复制成功')
        })
        clipboard.on('error', e => {
          this.$message.error('复制失败')
        })
      }
    }
  }
</script>

<style scoped>

</style>
